﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/ViewV5/CSS/icfont_qj/iconfont.css">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <link href="/ViewV5/JS/element/index.css" rel="stylesheet" />

    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/layer/layer.js"></script>

    <script src="/ViewV5/JS/element/element.js"></script>
    <script src="/ViewV5/JS/element/pltable/index.js"></script>

    <script src="/ViewV5/JS/bijs.js?v=5"></script>

    <style>


        .progress-of {
            height: 3px;
            background: #e1e6ea;
        }

            .progress-of .list {
                width: 33.333%;
                float: left;
                height: 100%;
                position: relative;
            }

                .progress-of .list span {
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    position: absolute;
                    left: 50%;
                    margin-left: -5px;
                    top: -5px;
                    background: #e1e6ea;
                    border-radius: 50%;
                }

                .progress-of .list i {
                    position: relative;
                    top: -30px;
                    display: inline-block;
                }

                .progress-of .list.active {
                    background: #2798df;
                }

                    .progress-of .list.active span {
                        background: #2798df;
                    }

        .progress-item {
            margin-bottom: 40px;
        }

        .progress-item-select {
            margin-left: 25px;
        }

            .progress-item-select select {
                width: 200px;
                height: 25px;
                margin-top: 5px;
            }

        .progress-btn {
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 20px;
            border-top: 1px solid #E7E7E7;
            width: 100%;
            background: #F9F9F9;
        }

        .add-item {
            float: left;
            margin-left: 10PX;
            margin-bottom: 10PX;
        }
    </style>



</head>
<body>
    <div class="container-fluid" id="PAGEVIEW" style="padding:20PX">
        <div class="mb10">
            <el-select v-model="pid" placeholder="请选择" ref="cz">
                <el-option v-for="item in options"
                           :key="item.id"
                           :label="item.label"
                           :value="item.id" v-show="item.id!='1'">
                </el-option>
            </el-select>
            <p>当前导入数据所属管理站:<span style="font-weight:bolder">[{{pid}}]{{zname}}</span></p>

        </div>
        <a href="/ViewV5/AppPage/SFJS/GLZMB.xlsx" class="btn btn-warning btn-sm"><i class="iconfont icon-fj ft14 mr5"></i>下载导入模板</a>

        <button type="button" class="btn btn-info btn-sm" @click="UploadClick()"><i class="iconfont icon-fj ft14 mr5"></i>上传Excel</button>
        <input type="file" name="upFile" id="upFile" class="form-control" @change="LoadUser()" accept=".xls,.xlsx" style="display:none;">

        <button type="button" class="btn btn-info" @click="CheckData()" id="ksdr">检测Excel</button>
        <button type="button" class="btn btn-info" @click="SaveJCData()" id="ksdr">导入基础数据</button>
        <button type="button" class="btn btn-info" @click="SaveUserData()" id="ksdr">导入缴费用户数据</button>
        <button type="button" class="btn btn-info hidden" @click="CLDRData()" id="ksdr">处理导入数据</button>

        <button type="button" class="btn btn-info" @click="TBOLDData()" id="ksdr">同步老数据</button>

        <button type="button" class="btn btn-danger pull-right" @click="DELZData()" id="ksdr">删除管理站数据</button>

        <pl-table :data="imPortData" height="450" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" border stripe style="width: 100%;margin-top:15PX;font-size: 10px" highlight-current-row>

            <pl-table-column type="index"
                             width="50" stripe border fit use-virtual>
            </pl-table-column>
            <pl-table-column v-for="col in tabfiledlist" :prop="col.ColumnName" :label="col.ColumnName" :key="col.ColumnName" min-width="120" align="center" sortable>
                <template slot-scope="scope">
                    <span>{{scope.row[col.ColumnName]}}</span>
                </template>
            </pl-table-column>

        </pl-table>

    </div>
    <script>
        var app = new Vue({
            el: '#PAGEVIEW',
            data: {
                pid: "",
                zname: "",
                imPortData: [],
                ImportCount: 0,
                ImportMsg: "",
                ErrorMsg: "",
                tabfiledlist: [],
                options: [],

            },
            created() {


            },
            methods: {
                jxfiled: function (jxdata) {
                    app.tabfiledlist = [];
                    _.forEach(_.keys(jxdata[0]), function (value) {
                        var fid = {
                            ColumnName: value,
                            ColumnType: "Str",
                            Dimension: "1",
                            Name: value,
                        }
                        if (_.findIndex(app.tabfiledlist, function (o) { return o.ColumnName == fid.ColumnName; }) == -1) {
                            app.tabfiledlist.push(fid);
                        }
                    });
                },//解析数据维度
                LoadUser: function () {
                    if (document.getElementById("upFile").files.length > 0) {
                        $(".tp-man").show();
                        app.imPortData = [];
                        app.ImportCount = 0;
                        var formData = new FormData();
                        formData.append("upFile", document.getElementById("upFile").files[0]);
                        formData.append("headrow", "0");
                        $.ajax({
                            url: "/API/VIEWAPI.ashx?Action=UPEXCEL",
                            type: "POST",
                            data: formData,
                            /**
                            *必须false才会自动加上正确的Content-Type
                            */
                            contentType: false,
                            /**
                            * 必须false才会避开jQuery对 formdata 的默认处理
                            * XMLHttpRequest会对 formdata 进行正确的处理
                            */
                            processData: false,
                            success: function (result) {
                                $("#upFile").change(function () {
                                    app.LoadUser();
                                });
                                var r = $.parseJSON(result);
                                if (r.ErrorMsg == "") {
                                    app.jxfiled(r.Result);
                                    app.imPortData = r.Result;

                                }
                                else {
                                    ComFunJS.winwarning(r.ErrorMsg);
                                }
                            }
                        });
                    }
                    else {
                        ComFunJS.winwarning("请上传文件");
                    }
                },
                reload: function () {
                    location.reload();
                },

                SaveJCData: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=SFJS_DRJCDATA", { P1: JSON.stringify(app.imPortData), P2: app.pid },
                        function (result) {
                            alert("操作成功")
                        })
                },
                CheckData: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=SFJS_JCDRDATA", { P1: JSON.stringify(app.imPortData), P2: app.pid },
                        function (result) {
                            alert("检测成功,可以导入")
                        }
                    )
                },
                SaveUserData: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=SFJS_DRUSERDATA", { P1: JSON.stringify(app.imPortData), P2: app.pid },
                        function (result) {
                            alert("操作成功" + result.Result1)
                        })
                },
                CLDRData: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=SFJS_CLDRDATA", { P1: app.pid , P2: app.pid },
                        function (result) {
                            alert("操作成功")
                        })
                },
                TBOLDData: function () {
                    var glzname = this.$refs.cz.selectedLabel;
                    $.getJSON("/api/Bll/ExeAction?Action=SFJS_TBGLZDATAV1", { P1: glzname, P2: app.pid },
                        function (result) {
                            if (result.ErrorMsg == "") {
                                app.jxfiled(result.Result);
                                app.imPortData = result.Result;

                            }
                            else {
                                ComFunJS.winwarning(result.ErrorMsg);
                            }
                        })
                },
                DELZData: function () {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.getJSON("/api/Bll/ExeAction?Action=SFJS_DELGLZDATA", { P1: app.pid },
                            function (result) {
                                alert("操作成功")
                            }
                        )
                    }).catch(() => {

                    });

                },
                UploadClick: function () {
                    $("#upFile").trigger("click");
                },
                qx: function () {
                    top.layer.closeAll();
                },


            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    $.getJSON('/api/Bll/ExeAction?Action=SFJS_GETGLZINFO', { P1: "" }, function (resultData) {
                        app.options = resultData.Result;
                    })
                })

            }
        })


    </script>
</body>

</html>
